<template>
    <Form ref="form"
          :model="formData"
          :rules="rules"
          :label-width="labelWidth"
          :label-position="labelPosition">
        <Row :gutter="24"
             type="flex"
             justify="end">
            <Col v-bind="grid"
                 v-for="(item, index) in changeFormData.slice(0,3)"
                 :key="index">
            <FormItem :label="`${item.label}：`"
                      :prop="item.name"
                      :label-for="item.name">
                <template v-if="item.type === 'input' && item.isRange">
                    <Row>
                        <Col span="10">
                        <Input v-model="item.valueS"
                               :placeholder="item.placeholder"
                               :element-id="item.name">
                        <span v-if="item.prepend && item.prepend !== ''"
                              slot="prepend">{{item.prepend}}</span>
                        <span v-if="item.append && item.append !== ''"
                              slot="append">{{item.append}}</span>
                        </Input>
                        </Col>
                        <Col span="4"
                             class="qw-text-c">-</Col>
                        <Col span="10">
                        <Input v-model="item.valueE"
                               :placeholder="item.placeholder"
                               :element-id="item.name">
                        <span v-if="item.prepend && item.prepend !== ''"
                              slot="prepend">{{item.prepend}}</span>
                        <span v-if="item.append && item.append !== ''"
                              slot="append">{{item.append}}</span>
                        </Input>
                        </Col>
                    </Row>
                </template>
                <template v-else-if="item.type === 'input'">
                    <Input v-model="item.value"
                           :placeholder="item.placeholder"
                           :element-id="item.name" />
                </template>
                <template v-if="item.type === 'select'">
                    <Select v-model="item.value"
                            :placeholder="item.placeholder"
                            :element-id="item.name"
                            :filterable="item.filterable"
                            :multiple="item.multiple">
                        <Option v-for="(selectItem, selectIndex) in item.selectList"
                                :key="selectIndex"
                                :value="selectItem.value">{{selectItem.label}}</Option>
                    </Select>
                </template>
                <template v-if="item.type === 'selectTree'">
                    <qw-select-tree :paramsInfo.sync="item"
                                    @changeSelectTreeModel="handleChangeSelectTree"></qw-select-tree>
                </template>
                <template v-if="item.type === 'date'">
                    <qw-data-picker :paramsInfo="item"></qw-data-picker>
                </template>
            </FormItem>
            </Col>
            <template v-if="collapse">
                <Col v-bind="grid"
                     v-for="(item, index) in changeFormData.slice(3)"
                     :key="index+3">
                <FormItem :label="`${item.label}：`"
                          :prop="item.name"
                          :label-for="item.name">
                    <template v-if="item.type === 'input' && item.isRange">
                        <Row>
                            <Col span="10">
                            <Input v-model="item.valueS"
                                   :placeholder="item.placeholder"
                                   :element-id="item.name">
                            <span v-if="item.prepend && item.prepend !== ''"
                                  slot="prepend">{{item.prepend}}</span>
                            <span v-if="item.append && item.append !== ''"
                                  slot="append">{{item.append}}</span>
                            </Input>
                            </Col>
                            <Col span="4"
                                 class="qw-text-c">-</Col>
                            <Col span="10">
                            <Input v-model="item.valueE"
                                   :placeholder="item.placeholder"
                                   :element-id="item.name">
                            <span v-if="item.prepend && item.prepend !== ''"
                                  slot="prepend">{{item.prepend}}</span>
                            <span v-if="item.append && item.append !== ''"
                                  slot="append">{{item.append}}</span>
                            </Input>
                            </Col>
                        </Row>
                    </template>
                    <template v-else-if="item.type === 'input'">
                        <Input v-model="item.value"
                               :placeholder="item.placeholder"
                               :element-id="item.name" />
                    </template>
                    <template v-if="item.type === 'select'">
                        <Select v-model="item.value"
                                :placeholder="item.placeholder"
                                :element-id="item.name"
                                :filterable="item.filterable"
                                :multiple="item.multiple">
                            <Option v-for="(selectItem, selectIndex) in item.selectList"
                                    :key="selectIndex"
                                    :value="selectItem.value">{{selectItem.label}}</Option>
                        </Select>
                    </template>
                    <template v-if="item.type === 'selectTree'">
                        <qw-select-tree :paramsInfo.sync="item"
                                        @changeSelectTreeModel="handleChangeSelectTree"></qw-select-tree>
                    </template>
                    <template v-if="item.type === 'date'">
                        <qw-data-picker :paramsInfo="item"></qw-data-picker>
                    </template>
                </FormItem>
                </Col>
            </template>
            <Col v-bind="grid"
                 class="ivu-text-right">
            <FormItem :label-width="10">
                <Button type="primary"
                        @click="handleSubmit">查询</Button>
                <Button class="ivu-ml-8"
                        @click="handleReset">清空</Button>
                <a v-font="14"
                   class="ivu-ml-8"
                   @click="collapse = !collapse">
                    <template v-if="!collapse">
                        展开
                        <Icon type="ios-arrow-down" />
                    </template>
                    <template v-else>
                        收起
                        <Icon type="ios-arrow-up" />
                    </template>
                </a>
            </FormItem>
            </Col>
        </Row>
    </Form>
</template>
<script>
    import { mapState } from 'vuex';
    import selectInput from '@/components/selectInput';
    import qwDataPicker from '@/components/common/tableForm/comp/qwDatePicker';
    import qwSelectTree from '@/components/common/tableForm/comp/qwSelectTree';
    import qwColItem from '@/components/common/tableForm/comp/qwColItem';

    export default {
        components: { selectInput, qwDataPicker, qwSelectTree, qwColItem },
        props: {
            formDataList: {
                type: Array
            }
        },
        data () {
            return {
                grid: {
                    xl: 8,
                    lg: 8,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                collapse: false,
                formData: {},
                rules: {
                    mainCategroy: [
                        { required: true, message: 'The name cannot be empty', trigger: 'blur' }
                    ],
                    shopName: [
                        { required: true, message: 'The name cannot be empty', trigger: 'blur' }
                    ],
                    saleNum: [
                        { required: true, message: 'The name cannot be empty', trigger: 'blur' }
                    ]
                },
                // 操作数据
                changeFormData: []
            }
        },
        computed: {
            ...mapState('admin/layout', ['isMobile']),
            labelWidth () {
                return this.isMobile ? undefined : 100;
            },
            labelPosition () {
                return this.isMobile ? 'top' : 'right';
            }
        },
        created () {
            // 复制一份原始数据
            this.changeFormData = JSON.parse(JSON.stringify(this.formDataList));

            if (this.changeFormData.length < 2) {
                this.grid.xl = 12;
                this.grid.lg = 12;
            } else {
                this.grid.xl = 8;
                this.grid.lg = 8;
            }
        },
        methods: {
            handleSubmit () {
                this.$emit('on-submit', this.getFormDate());
            },
            handleReset () {
                // 表单清空方法
                // this.$refs.form.resetFields();

                // 恢复原始数据
                let changeFormData = JSON.parse(JSON.stringify(this.formDataList));
                this.$set(this, 'changeFormData', changeFormData);

                this.$emit('on-reset', this.getFormDate());
            },
            // 封装筛选数据 对象
            getFormDate () {
                let formData = {};
                this.changeFormData.forEach(item => {
                    let name = item.name;
                    if (item.type === 'input' && item.isRange) {
                        formData[name] = [item.valueS, item.valueE];
                    } else {
                        formData[name] = item.value;
                    }
                });
                return formData
            }
        }
    }
</script>
